<template>
  <up-popup :show="show" mode="center" @close="close" @open="open"
            :customStyle="{'width':'80%', 'height':'80%', 'border-radius':'10rpx','background':'linear-gradient(to top, #f5efef 40%, #feada6 100%)'}">
    <view class="bg-box">
      <image src="/static/icon/food/jiandan.png" class="bg-item"
             style="--size: 40rpx;--top: 10%;--left: 20%"/>
      <image src="/static/icon/food/mifan.png" class="bg-item"
             style="--size: 50rpx;--top: 30%;--left: 60%"/>
      <image src="/static/icon/food/shucai-_13.png" class="bg-item"
             style="--size: 50rpx;--top: 40%;--left: 50%"/>
      <image src="/static/icon/food/hongzao.png" class="bg-item"
             style="--size: 50rpx;--top: 50%;--left: 20%"/>
      <image src="/static/icon/food/shucai-_14.png" class="bg-item"
             style="--size: 40rpx;--top: 65%;--left: 35%"/>
      <image src="/static/icon/food/jiandan.png" class="bg-item"
             style="--size: 40rpx;--top: 80%;--left: 10%"/>
    </view>
    <view>123134</view>
  </up-popup>
</template>

<script lang="ts" setup>

import {ref, defineExpose, reactive} from "vue";

const show = ref(false)
const imgs = reactive([
  '/static/icon/food/jiandan.png',
  '/static/icon/food/mifan.png',
  '/static/icon/food/jiandan.png',
  '/static/icon/food/shucai-_13.png',
  '/static/icon/food/shucai-_4.png'
])

const close = () => {
  show.value = false
}
const open = () => {
  show.value = true
}

defineExpose({
  open
})

</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.bg-box {
  position: absolute;
  width: 100%;
  height: 100%;

  .bg-item {
    position: relative;
    top: var(--top);
    left: var(--left);
    font-weight: 600;
    color: #fff;
    width: var(--size);
    height: var(--size);
    opacity: var(--opacity, 1);
  }
}


.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  color: white;
  font-size: calc(var(--size, 1) * 1em);
  left: var(--left, 0%);
  top: -10%;
  animation: fall var(--speed, 10s) linear infinite;
  opacity: var(--opacity, 0.8);
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
  }
}
</style>